<template>
	<view>

		<u-popup :show="show" @close="close" @open="open" mode="center" :round="20">
			<view class="card">
				<view class="flex-sb">
					<view class="fs-36 bold">好友名片</view>
					<image class="size-40" src="/static/myImages/close.png" @click="close()"></image>
				</view>

				<view class="flex mg-t-20">
					<view class="size-110">
						<image class="size-110 radius-c" src="/static/myImages/avatar.png"></image>
					</view>
					<view class="mg-l-10" style="width: 100%;">
						<view class="flex-sb">
							<view class="fs-30 bold">张三</view>
							<view class="c-white fs-24 radius-50" :class="vip==1?'bg-blue':'bg-777'"
								style="padding: 5rpx 10rpx;">非VIP</view>
						</view>
						<view class="flex mg-t-10">
							<view class="fs-30 c-gray">ID:153671</view>
							<image src="/static/myImages/copy.png" class="mg-l-10 size-30"></image>
						</view>
					</view>
				</view>

				<view class="flex mg-t-70">
					<view class="flex-1 flex-col-center">
						<view class="fs-30 bold">0人</view>
						<view class="fs-24 c-gray mg-t-10">团队好友</view>
					</view>
					<view class="flex-1 flex-col-center">
						<view class="fs-30 bold">0人</view>
						<view class="fs-24 c-gray mg-t-10">直推有效</view>
					</view>
					<view class="flex-1 flex-col-center">
						<view class="fs-30 bold">0人</view>
						<view class="fs-24 c-gray mg-t-10">间推有效</view>
					</view>
				</view>

				<view class="fs-30 bold mg-t-30">联系方式</view>

				<view class="flex gap-40 mg-t-30">
					<view class="flex-1 bg-gray p-20 radius-20">
						<view class="flex-sb">
							<view class="flex">
								<image class="size-40" src="/static/myImages/wx.png"></image>
								<view class="fs-24 c-gray mg-l-10 ellipsis" style="width: 120rpx;">{{'未填写'}}</view>
							</view>
							<image src="/static/myImages/copy.png" class="mg-l-10 size-30"></image>
						</view>
					</view>
					<view class="flex-1 bg-gray p-20 radius-20">
						<view class="flex-sb">
							<view class="flex">
								<image class="size-40" src="/static/myImages/QQ.png"></image>
								<view class="fs-24 c-gray mg-l-10  ellipsis" style="width: 120rpx;">{{'未填写'}}</view>
							</view>
							<image src="/static/myImages/copy.png" class="mg-l-10 size-30"></image>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		props: {
			show: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: 'test'
			},

		},
		data() {
			return {
				img_src: app.globalData.img_src,
				statusBarHeight: getApp().globalData.statusBarHeight,
				statusBarHeight1: getApp().globalData.statusBarHeight1,
				vip: 2
			}
		},
		onLoad() {},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.$emit('update:show', false);
				// console.log('close');
			}

		}
	}
</script>

<style scoped lang="scss">
	.card {
		width: 600rpx;
		height: 670rpx;
		padding: 40rpx 60rpx 30rpx 30rpx;
	}
</style>